<template>
  <div class="dashboard-container">
    <el-carousel :interval="4000" type="card" height="50vh">
      <el-carousel-item
        style="width: 100vw"
        v-for="item in bannerList"
        :key="item.name"
      >
        <img style="height: 100%" :src="item.imageUrl" :key="item.name" alt="" />
      </el-carousel-item>
    </el-carousel>
    <div class="module boxW">
      <img src="../../assets/image/hot.png" alt=""  @click="gotoPage('/commodity/index',{tagTitle: '热销'})">
      <img src="../../assets/image/specialoffer.png" alt="" @click="gotoPage('/commodity/index',{tagTitle: '特价'})">
      <img src="../../assets/image/new.jpg" alt="" @click="gotoPage('/commodity/index',{tagTitle: '新品'})">
      <img src="../../assets/image/taste.png" alt="" @click="gotoPage('/commodity/index',{tagTitle: '精心'})">
      <img src="../../assets/image/designer.jpg" alt="" @click="gotoPage('/commodity/index',{tagTitle: '甄选'})">
    </div>
    <div class="title boxW">
      <img src="../../assets/image/friendTitle.png" alt="" />
      <div @click="gotoPage('/commodity/index',{tagTitle: '友情'})">查看更多>></div>
    </div>
    <list-item :initVal="friendList"></list-item>
    <div class="title boxW">
      <img src="../../assets/image/lovetitle.png" alt="" />
      <div @click="gotoPage('/commodity/index',{tagTitle: '爱情'})">查看更多>></div>
    </div>
    <list-item :initVal="loveList"></list-item>
    <div class="title boxW">
      <img src="../../assets/image/worktitle.png" alt="" />
      <div @click="gotoPage('/commodity/index',{tagTitle: '开业'})">查看更多>></div>
    </div>
    <list-item :initVal="workList"></list-item>
    
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import ListItem from "../../components/listItem/list.vue";
import { getTag } from '../../api/info'
import { getFlowerList } from '../../api/dashboard'
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  components: { ListItem },
  data() {
    return {
      bannerList: [
        {
          name: "1",
          imageUrl: "https://gd-hbimg.huaban.com/14ec61c89bb5f15499cf93974220e9be043fe098be3f-RTZ2y4",
        },
        {
          name: "2",
          imageUrl: "https://gd-hbimg.huaban.com/abd520678674175309410471bd137d112ce3d124f04d1-nR6hcd",
        },
        {
          name: "3",
          imageUrl: "https://gd-hbimg.huaban.com/abd75939c7844e7841849f5578b10683bc94f6c6182d8-VuI3Tv",
        },
      ],
      friendList: {
        img: require("../../assets/image/friend.jpg"),
        list: [],
      },
      loveList: {
        img: require("../../assets/image/love.jpg"),
        list: [],
      },
      workList: {
        img: require("../../assets/image/work.jpg"),
        list: [],
      },
      tabLists:[]
    }
  },
  created(){
    console.log('进来拉')
    // this.getALLTag()
    this.queryFlowerList('友情','friendList')
    this.queryFlowerList('爱情','loveList')
    this.queryFlowerList('开业','workList')
  },
  methods:{
    queryFlowerList(tagTitle,list){
      return getFlowerList({size:8,current:1,input:{tagTitle}}).then(res=>{
        this[list].list = res.data.records || []
      })
    },
    // 获取全部标签
    getALLTag(){
      getTag().then(res=>{
        this.tabLists = res.data || []
      })
    },
    gotoPage(url,query){
      this.$router.push({
        path: url,
        query
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    width: 100vw;
    overflow: hidden;
    .boxW{
      width: 80vw;
      margin: 15px auto;
    }
    .title {
      display: flex;
     
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        color: rgb(136, 78, 34);
        cursor: pointer;
      }
    }
    .module{
      display: flex;
      justify-content: space-between;
      img{
        width: 288px;
        max-width: 15.2vw;
      }
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
